<template>
  <div class="record">
    <!-- 标题 -->
    <div class="recordtitle">病例学习记录</div>
    <!-- 主体内容区域 -->
    <div class="recordmain">
      <a-table
        ref="userList"
        row-key="userId"
        page-position="bottom"
        :pagination="pagination"
        :columns="columns"
        :data="rendata"
        :stripe="true"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Pagination } from '@/types/global';
  import { TableColumnData } from '@arco-design/web-vue';
  import { computed, reactive, ref } from 'vue';
  import { recordlistlx } from '@/api/case';
  import { useUserStore } from '@/store';
  import { storeToRefs } from 'pinia';
  import { Message, Modal, TreeNodeData } from '@arco-design/web-vue';
  const userStore = useUserStore();
  const userdata = storeToRefs(userStore);
  const studentdata = ref(userdata);
  const rendata = ref();
  const fetchData = () => {
    recordlistlx({
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      studentId: studentdata.value.studentId,
    }).then((res: any) => {
      if (res.code == 200) {
        rendata.value = res.data.list;
        pagination.current = res.data.pageNum;
        pagination.pageSize = res.data.pageSize;
        pagination.total = res.data.total;
      }
    });
  };
  const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
  };

  const columns = computed<TableColumnData[]>(() => [
    // {
    //   title: '序号',

    //   dataIndex: 'option',
    //   slotName: 'option',
    // },
    {
      title: '学习时间',
      dataIndex: 'createTime',
    },

    {
      title: '病例名称',
      dataIndex: 'caseName',
    },
    {
      title: '学习次数',
      dataIndex: 'learnNum',
    },
  ]);
  const pagination = reactive({
    ...basePagination,
    'hide-on-single-page': true,
    'show-total': true,
    'show-jumper': true,
    'show-page-size': true,
  });
  const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
  };
  const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    fetchData();
  };
  fetchData();
</script>

<style scoped>
  .record {
    width: 1486px;
    height: 820px;
    background: #e8ebee;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #a3b0c1;
    display: flex;
    flex-direction: column;
    padding: 15px 30px;
  }
  .recordtitle {
    font-size: 20px;
    font-weight: 800;
    margin: 10px 0;
  }
  .recordmain {
    height: 700px;
    width: 100%;
    margin: 15px 0;
    overflow-y: auto;
  }
</style>
